/** @jsxImportSource @emotion/react */
import * as React from "react";
import {
    Text, Table, TableBody, TableRow, Cell, CCell, Button, Collapse,
} from "customize-easy-ui-component";
import { DirectLink } from "../../../routing/Link";
import {ReportViewProps, ReportViewSubProps,} from "../../common/base";
import {
    分项末尾链接,
} from "../../common/rarelyVary";
import {useMainRepUrlOr, useSplitSubCapacity, useSplitSubRepList} from "../../hook/useMainRepUrlOr";
import {config测量仪, } from "./orcBase";
import {useContext} from "react";
import RoutingContext from "../../../routing/RoutingContext";
import {useThreeColumnSubr} from "../../hook/useThreeColumnSubr";
import Img_QMX_TEST  from './QMX_TEST.png';
import {SimpleImg} from "../../../comp/Image";

/**@param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * 只要是公共的模板：那modelConfigs.ts就不能少了配置该模板代码。
 * */
export const ReportView: React.FunctionComponent<ReportViewProps> = (
    {repId,   source: parentOrc,  verId,rep, redId,fxIdx ,...other}
) => {
    const {urlMainRep}=useMainRepUrlOr(rep);
    const lsBlockMax=useSplitSubCapacity(parentOrc?._GASPR_TS?.length,1);       //【模板敲定一次性最大几个分项显示出来】有些分项报告模板可能存在很多个分项 最多1个
    const {sumArea, areaIdAs, btnBindUses}=useSplitSubRepList(parentOrc?._GASPR_TS ?? [], lsBlockMax,false);
    const { get:getRouteUrl } = useContext(RoutingContext);
    const routeLevels=getRouteUrl().entries.length;
    const routeTemplate=getRouteUrl().entries[routeLevels-1]?.routeData?.params?.template;
    return (
        <React.Fragment>
          <div  id="rp_gasproof_"  css={{"@media not print": {marginTop:'1rem', marginBottom: '1rem'},}}>
             <DirectLink  href={`/report/GASPR_TS/ver/${verId}/${repId}/GASPR_TS/_Controller`}>
                <div css={{"@media print":{display: 'none'} }}>
                    <Button>{(repId===rep?.id && rep?.modeltype!=='GASPR_TS')? '内嵌式的':'独立流转的'}气密性试验报告分项控制器</Button>
                </div>
             </DirectLink>
            {(new Array(sumArea).fill(null)).map((s:any,ak:number) => {
                const [isDisplay, bindBtn]=btnBindUses[ak];      //不要加上 tabIndex={0} 超过折叠区域最大数量的？
                //可折叠区的：独立流转的报告，和内嵌分项的，实际还分开的。两者独自控制折叠的。内嵌分项rep.id相等，独立流转的却不等的ID;
                return <React.Fragment key={ak}>
                    <div key={ak} role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                        { <Text variant="h4">{`气密性试验折叠区${ak+1}，`}{isDisplay ? `收起`:`更多..`}</Text> }
                    </div>
                    <Collapse id={`${ak}`} show={isDisplay} noAnimated>
                        { areaIdAs[ak]?.map((surpId: any, m:number) => {
                            const dispIdx=(fxIdx??0) +(m+ ak*lsBlockMax);
                            return <OneSubRepView key={m} fxIdx={fxIdx} dispIdx={dispIdx} rep={rep} repId={repId}
                                                  verId={verId} parentOrc={parentOrc} surpId={surpId}/>
                        }) }
                        <div role="button" {...bindBtn}  css={{"@media print":{display: 'none'}}}>
                            <Text variant="h4">{`气密性试验折叠区${ak+1}结束,收起`}</Text>
                        </div>
                    </Collapse>
                </React.Fragment>
            })}
          </div>
          {分项末尾链接({template:'GASPR_TS', repId: repId||'',verId,urlMainRep,
                nestIn:'GASPR_TS'!==routeTemplate, flowNest: repId!==rep?.id}) }
       </React.Fragment>
    );
}

/**为了用上useRepTableViewer，就只能从上级组件脱离分出来
 * @param fxIdx: 独立流转模式的 分项序号的基数； 若是嵌入式的分项该参数=undefined! rep?.id!==repId
 * */
const OneSubRepView: React.FunctionComponent<ReportViewSubProps> = (
    {fxIdx,dispIdx,rep,repId,verId,parentOrc,surpId}
) => {
    const orc=parentOrc['_GASPR_TS_'+surpId];
    // const [renderRows,]=useRep2hTableViewer(config评定, '评定表', orc,true,true,true);
    //可直接按行分解变身几个部分！每个独立再来拼装的。
    const [firstNode,_S]=useThreeColumnSubr({orc, config:config测量仪,parentOrc,slash:true,
                        href:`/report/GASPR_TS/ver/${verId}/${repId}/${surpId}/Instrument`});

    return <React.Fragment>
        <div css={{"@media print": {paddingBottom: '4rem', pageBreakInside: 'avoid'}}}>
            <Text variant="h2" css={{
                textAlign: 'center', marginTop: '1rem',
            }}>气密性试验报告{dispIdx ? '-' + dispIdx : ''}</Text>
            <div css={{
                display: 'flex',
                justifyContent: 'space-between'
            }}>
                <Text>单位内部编号：{orc?.单内编 || '／'}</Text>
                <Text>报告编号：{rep.isp.no}</Text>
            </div>
        </div>
         <Table fixed={ ["12.1%","24%","16.1%","19%","12.1%","%"] } tight miniw={800}
                  css={{borderCollapse: 'collapse', "@media print": {marginTop: '-4rem'}}}>
            <TableBody>
                {firstNode}
            </TableBody>
          </Table>
           <Table fixed={["62%", "%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
                <TableBody>
                    <DirectLink href={`/report/GASPR_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                        <TableRow>
                            <Cell colSpan={2} split={true}>
                                <Text css={{display: 'block',textAlign: 'center'}}>试 验 程 序 记 录</Text>
                                缓慢升至试验压力：&nbsp; {orc?.密试压}&nbsp;MPa，保压&nbsp;{orc?.保压时} &nbsp;min；<br/>
                                检查容器及连接部位：&nbsp; {orc?.泄漏}&nbsp;泄漏，&nbsp;{orc?.异常现} &nbsp;异常现象。
                            </Cell>
                        </TableRow>
                    </DirectLink>
                    <DirectLink href={`/report/GASPR_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                        <TableRow>
                            <Cell colSpan={2} split={true}
                                  css={{"@media print": {height: undefined}, padding: 0}}>
                                实际试验曲线：<br/>
                                <div css={{display: 'flex'}}>
                                    <div css={{width: '38%',alignSelf:'center'}}>
                                        <Text css={{display: 'flex',textAlign: 'center',flexDirection:'row-reverse'}}>P(MPa)</Text>
                                        试验压力：&nbsp;{orc?.密试压}
                                    </div>
                                    <div>
                                        <SimpleImg url={Img_QMX_TEST} css={{width: '100%', maxWidth: '23rem'}}/>
                                        <Text css={{display: 'block',textAlign: 'center'}}>
                                            开始：&nbsp;{orc?.开始时} &nbsp;结束：{orc?.结束时} &nbsp;
                                        </Text>
                                    </div>
                                </div>
                            </Cell>
                        </TableRow>
                    </DirectLink>
                </TableBody>
            </Table>
            <Table fixed={["62%", "%"]} css={{borderCollapse: 'collapse'}} tight miniw={800}>
                <TableBody>
                    <DirectLink href={`/report/GASPR_TS/ver/${verId}/${repId}/${surpId}/ResultDiagram`}>
                        <TableRow>
                            <Cell split={true} colSpan={2}>
                                <div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                                    <Text css={{fontSize: '0.8rem'}}>备注：</Text><br/>
                                    {orc?.备注 || '／'}
                                </div>
                            </Cell>
                        </TableRow>
                        <TableRow>
                            <Cell split={true} colSpan={2}>
                                <div css={{minHeight: '3rem', whiteSpace: 'pre-wrap'}}>
                                    <Text css={{fontSize: '0.8rem'}}>试验结果：</Text><br/>
                                    <Text>{orc?.检测结果 || '／'}</Text>
                                </div>
                            </Cell>
                        </TableRow>
                    </DirectLink>
                    <TableRow>
                        <CCell>
                            <div css={{
                                height: '100%',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignContent: 'space-between',
                                alignItems: 'flex-start'
                            }}>
                                <div><Text>检验：</Text></div>
                                <div css={{textAlign: 'end'}}><Text>日期</Text>2022-12-31</div>
                            </div>
                        </CCell>
                        <CCell>
                            <div css={{
                                height: '100%',
                                display: 'flex',
                                justifyContent: 'space-between',
                                alignContent: 'space-between',
                                alignItems: 'flex-start'
                            }}>
                                <div><Text>审核：</Text></div>
                                <div css={{textAlign: 'end'}}><Text>日期</Text>2021-01-31</div>
                            </div>
                        </CCell>
                    </TableRow>
                </TableBody>
            </Table>
    </React.Fragment>;
}

